<!--
 * @Author: wang_sheshe
 * @Date: 2021-05-24 09:27:02
 * @LastEditTime: 2021-06-05 15:48:29
 * @Description: 人员签名
-->
<template>
	<div style="height: 538px;width: auto;">
		<van-nav-bar class="subClass" left-text="取消" right-text="确认" title="签名" @click-left="back"  @click-right="handleGenerate"></van-nav-bar>
		<vue-esign ref="esign" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
		<div style="padding: 10px;background:gray;display: flex;justify-content: space-between;">
			<van-button  size="small" @click="handleReset" type="default" >清空画板</van-button>
			<van-button  size="small" @click="handleGenerate" type="primary" >生成图片</van-button>
		</div>
	</div>
</template>
<script>
	import Utils from "@/utils/util"
	import DbUtil from '@/utils/dbUtil.js'
	import Constant from '@/utils/constant.js'
	export default{
		name: "personSigns",//tab单选组件
		props: {
			
		},
		data() {
			return {
				historySigns: [],//历史签名
				signs: [],//签名
				isCrop: true,//是否裁剪
				lineWidth: 6,//画笔粗细
				lineColor: '#000000',//画笔颜色
				bgColor: "",//画布背景颜色
				hostorySigns: [],//历史签名
			}
		},
		methods: {
			//清空画板
			handleReset() {
				this.$refs.esign.reset();
			},
			//生成工作人员签名
			handleGenerate() {
				var self = this;
				this.$refs.esign.generate().then(res => {
					self.$refs.esign.reset();
					self.$emit("personback",res);
				}).catch(err => {
					console.log("画布执行失败"+ err)
					self.$Toast.fail("请签名!")
					self.$refs.esign.reset();
				})
			},
			back() {
				this.handleReset();
				this.$emit("closesign")
			}
		},
		mounted() {
			// this.userInfo = JSON.parse(localStorage.user);
			// this.delTimeoutSignData();
		},	
	}
</script>
<style scoped>
	.subClass /deep/ .van-nav-bar__text{
		font-size: 16px !important;
	}
</style>